<template>
    <scroll-view @refresherrefresh="refresherpulling" :refresher-triggered="enabled" refresher-enabled class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower">
        <view class="content">
            <!-- 渐变色 -->
            <view class="positioning"></view>
            <!-- 搜索框 -->
            <view class="top">
                <view class="left">
                    <image class="position" src="@/static/area.png" mode=""></image>
                    <view class="address">{{ district }}</view>
                </view>
                <view class="right">
                    <input @blur="blur" v-model="keywords" placeholder-class="placeholder-text" type="text" placeholder="搜索商品、类目" />
                </view>
            </view>
            <!-- 轮播图 -->
            <view class="swiper">
                <swiper indicator-active-color="#fff" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500" :circular="true">
                    <swiper-item @click="shopDetas2(it)" v-for="it in banner" :key="it.id">
                        <image class="swiper-image" :src="it.image" mode=""></image>
                    </swiper-item>
                </swiper>
            </view>
            <!-- 分类 -->
            <view class="classification">
                <view @click="fenClass(it)" class="food" v-for="it in assort" :key="it.id">
                    <image class="food-img" :src="it.image" mode=""></image>
                    <view class="">{{ it.name }}</view>
                </view>
                <!--  <view class="food food-bottom">
                    <image class="food-img" src="@/static/Group10.png" mode=""></image>
                    <view class="">全部</view>
                </view> -->
            </view>
            <!-- 最近团购 -->
            <view class="group">
                <view class="group-top">
                    <view class="group-left">
                        <image class="image" src="@/static/history.png" mode=""></image>
                        <view class="group-text">最近团购</view>
                        <view class="">就近买，更便宜</view>
                    </view>
                    <!--    <view class="group-right">
                        <view class="">更多</view>
                        <image class="image" src="@/static/right1.png" mode=""></image>
                    </view> -->
                </view>
                <view class="group-bottom">
                    <view class="shops" v-for="it in groupBuy" :key="it.id" @click="shopDetas2(it)">
                        <view class="shops-img">
                            <image class="border-img" src="@/static/Group11.png" mode=""></image>
                            <image class="yifu" :src="it.image" mode="aspectFit"></image>
                            <view class="price">￥{{ it.price }}</view>
                        </view>
                        <view class="sp-text">{{ it.title }}</view>
                    </view>
                </view>
            </view>
            <!-- 商铺 -->
            <view class="one-shops" v-for="(item, index) in shopList" :key="index">
                <view class="sp-top">
                    <view @click="shopDetas1(item)" class="sp-left">
                        <image class="o-img" :src="item.logo" mode=""></image>
                        <view class="shop-name">{{ item.name }}</view>
                        <image class="t-img" src="@/static/right2.png" mode=""></image>
                    </view>
                    <view class="sp-right">{{ item.distance_text }}</view>
                </view>
                <view class="sp-bottom">
                    <view @click="shopDetas2(it)" class="one" v-for="it in item.goodsList" :key="it.id">
                        <image class="one-img" :src="it.image" mode="aspectFit"></image>
                        <view class="sp-price">
                            ￥
                            <text>{{ it.price }}</text>
                        </view>
                        <view class="sp-text">{{ it.title }}</view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<script setup>
import { category, shops, oneIndex, getClass } from '@/api/index.js';
import { utils } from '@/utils/utils.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
const assort = ref([]); //分类列表
const shopList = ref([]); //商铺列表
const allTotal = ref(''); //商铺列表总页数
const page = ref(1); //商铺列表页数
const banner = ref([]); //获取轮播图
const groupBuy = ref([]); //最近团购
const lng = ref(); //经度
const lat = ref(); //纬度
const enabled = ref(false); //控制下拉刷新
const keywords = ref(''); //搜索框的值
const district = ref(''); //当前地区
onLoad(async (e) => {
	console.log(e,'分享码')
	if(e.code){
		uni.setStorageSync("invite_code",e.code)
	}
	bannerList(); //首页
});
onShow(async () => {
    keywords.value = '';
	await latAndlog(); //获取经纬度
	assortList();
	
	getShopList();
	convert(); //转换地址
});
// 搜索框
const blur = () => {
    if (keywords.value != '') {
        uni.navigateTo({
            url: `/pages/sub/search?keywords=${keywords.value}`
        });
    }
};
// 下拉刷新
const refresherpulling = async () => {
    page.value = 1;
    shopList.value = [];

    enabled.value = true;
    await assortList();
    bannerList(); //首页
    getShopList();
    enabled.value = false;
};
// 获取当前经纬度
const latAndlog = () => {
    return new Promise((resolve, reject) => {
        uni.getLocation({
            type: 'wgs84',
            success: function (res) {
                lng.value = res.longitude;
                lat.value = res.latitude;
                console.log('当前位置的经度：' + res.longitude);
                console.log('当前位置的纬度：' + res.latitude);
                resolve({ longitude: res.longitude, latitude: res.latitude });
            },
            fail: function (err) {
                reject(err);
            }
        });
    });
};
// 点击分类列表
const fenClass = (it) => {
    console.log(222, it);
    uni.navigateTo({
        url: `/pages/sub/supermarket?pid=${it.id}&names=${it.name}`
    });
};
// 获取分类列表
const assortList = async () => {
    const ret = await category();
    console.log(ret);
    if (ret.code == 1) {
        assort.value = ret.data;
        assort.value.reverse(); //反转数组
    }
};
// 获取轮播图
const bannerList = async () => {
    console.log(1111, lng.value, lat.value);
    const ret = await oneIndex(lng.value, lat.value);
    console.log(ret);
    if (ret.code == 1) {
        banner.value = ret.data.bannerList;
        groupBuy.value = ret.data.goodsList;
    }
};
// 获取商铺列表
const getShopList = async () => {
    const parameter = {
        page: page.value,
        lat: lat.value,
        lng: lng.value
    };
    const ret = await shops(parameter);
    console.log(ret.data);
    if (ret.code == 1) {
        // 将服务器返回的数据，追加至 shopList
        shopList.value = [...shopList.value, ...ret.data.data];
        allTotal.value = ret.data.total;
    } else {
        utils();
    }
};
const scrolltolower = () => {
    console.log('滚动到底部加载下一页');
    // 当前列表的长度如果小于或等于总页数
    if (shopList.value.length == allTotal.value) {
        return utils('没有更多数据了...');
    }
    page.value++;
    getShopList();
    console.log(22, page.value);
};
//点击店铺跳转店铺详情
const shopDetas1 = (item) => {
    console.log(777, item);
    uni.navigateTo({
        url: `/pages/sub/details?ids=${item.id}`
    });
};
//点击商品跳转商品详情
const shopDetas2 = (it) => {
    console.log(it);
    uni.navigateTo({
        url: `/pages/sub/shopDetails?ids=${it.id}`
    });
};
// 获取地区位置
const convert = async () => {
    uni.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        method: 'POST',
        data: {
            location: `${lat.value},${lng.value}`,
            key: 'KSSBZ-4CDLI-PC4GD-UWNJH-2WLP7-7LF4Z'
        },
        header: { 'content-type': 'application/json' },
        success: async (res) => {
            district.value = res.data.result.address_component.district;
            console.log(11111, res);
        },
        // 这里的接口请求，如果出现问题就输出接口请求失败
        fail: (err) => {
            utils(err);
        }
    });
};
</script>

<style lang="scss" scoped>
.scroll-view {
    height: 100vh;
}
.content {
    padding: 0 30rpx;
    background-color: #f7f7f7;
    min-height: 100vh;
    padding-bottom: 100rpx;
    .positioning {
        height: 282rpx;
        background: linear-gradient(to bottom, #ffe8be, #f7f7f7);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    // 商铺
    .one-shops {
        .sp-bottom {
            .one {
                .sp-text {
                    width: 187rpx;
                    font-size: 26.02rpx;
                    white-space: nowrap; /* 禁止换行 */
                    overflow: hidden; /* 隐藏超出部分 */
                    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
                }
                .sp-price {
                    color: #f84834;
                }
                .one-img {
                    background-color: #f8f8f8;
                    border-radius: 12rpx;
                    width: 195rpx;
                    height: 200rpx;
                }
            }
            display: flex;
            justify-content: space-between;
        }
        .sp-top {
            .sp-left {
                .shop-name {
                    color: #333333;
                    margin-left: 24rpx;
                    margin-right: 14rpx;
                }
                .o-img {
                    width: 67rpx;
                    height: 67rpx;
                    border-radius: 50%;
                }
                .t-img {
                    width: 26rpx;
                    height: 26rpx;
                }
                display: flex;
                align-items: center;
            }
            .sp-right {
                color: #999999;
                font-size: 26rpx;
            }
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 36rpx;
        }
        padding: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
    }
    // 团购
    .group {
        .group-bottom {
            .shops {
                .shops-img {
                    .border-img {
                        width: 202rpx;
                        height: 240rpx;
                    }
                    .yifu {
                        width: 151rpx;
                        height: 151rpx;
                        position: absolute;
                        left: 24rpx;
                        top: 34rpx;
                    }
                    .price {
                        color: #fff;
                        position: absolute;
                        left: 10rpx;
                        bottom: 14rpx;
                        font-size: 29rpx;
                    }
                    position: relative;
                }
                .sp-text {
                    width: 202rpx;
                    font-size: 26.02rpx;
                    margin-top: 22rpx;
                    white-space: nowrap; /* 禁止换行 */
                    overflow: hidden; /* 隐藏超出部分 */
                    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
                }
            }
            display: flex;
            justify-content: space-between;
        }
        .group-top {
            .group-right {
                display: flex;
                align-items: center;
                .image {
                    width: 11rpx;
                    height: 19rpx;
                    margin-left: 14rpx;
                }
            }
            .group-left {
                display: flex;
                align-items: center;
                .image {
                    width: 36rpx;
                    height: 36rpx;
                }
                .group-text {
                    margin-left: 10rpx;
                    margin-right: 20rpx;
                    color: #333333;
                    font-size: 29.5rpx;
                }
            }
            color: #999999;
            font-size: 23rpx;
            height: 36rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 26rpx;
        }
        padding: 32rpx 26rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin: 30rpx 0;
    }

    // 分类
    .classification {
        .food {
            text-align: center;
            font-size: 22.34rpx;
            color: #333333;
            margin-right: 43rpx;
            margin-bottom: 30rpx;
            .food-img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin-bottom: 22rpx;
            }
        }
        .food-bottom {
            margin-bottom: 0;
        }
        border-radius: 50rpx;
        padding: 36rpx 0;
        padding-left: 36rpx;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        // justify-content: center;
        align-items: center;
    }
    // 轮播图
    .swiper {
        .swiper-image {
            width: 690rpx;
            height: 300rpx;
        }
        width: 690rpx;
        height: 300rpx;
        margin: 40rpx 0 30rpx 0;
        overflow: hidden;
        border-radius: 12rpx;
    }
    // 顶部样式
    .top {
        .left {
            z-index: 9;
            display: flex;
            align-items: center;
            .position {
                width: 24rpx;
                height: 29rpx;
            }
            .address {
                margin-left: 18rpx;
                font-size: 26.25rpx;
            }
        }
        .right {
            /* 在 .wxss 文件中 */
            ::v-deep .placeholder-text {
                font-size: 26.25rpx;
                color: #cccccc;
            }
            width: 534rpx;
            height: 72rpx;
            background: #ffffff;
            border-radius: 50rpx;
            padding-left: 76rpx;
            align-items: center;
            display: flex;
            z-index: 9;
        }
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 72rpx;
        padding-top: 40rpx;
        // margin-top: 40rpx;
    }
}
</style>
